#include ("/_includes/_layout.html")
#define css()
<style>
.dt-loading {color:#777; display: inline-block; margin-left: 5px;}
#dependencyTreeViewer {background: #fff; overflow:visible !important; height: auto !important; max-height: auto !important;}
.dt-buttons {text-align: right;}
.dt-buttons a {display: inline;}
.jstree-anchor > label > span > i {color: gray;font-size: 10px;}
.jstree-icon {color: darkseagreen;}
.indicators {display:inline-block; margin-left: 10px;}
.indicator{display: inline;position: relative;color:green;}
.indicator:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: 20px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    min-width: 50px;
    max-width: 500px;
    width: auto;
    word-wrap: break-word;
}
.indicator-red {color: red;}
.indicator-lightgreen {color: darkseagreen;}
a.gray, a.gray:hover {color:gray !important;}
a.properties, a.properties:hover {font-style: italic; color:gray !important; }
#dependencyTreeExport .fa-stack-1x:before { margin-left: 5px; }
.jstree-open > .jstree-anchor > .fa-folder:before {
    content: "\f07c";
}
.jstree-default .jstree-icon.none {
    width: 0;
}
</style>
#end
#@layout("角色管理", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	<div class="row content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	           <a href="#(webctx)/employee" class="J_menuTab">员工管理</a>
	           <a href="#(webctx)/role" class="J_menuTab active">角色权限</a>
	       </div>
	   	</nav>
	</div>
	<div class="content row ibox-content">
	    <form method="POST" class="form-horizontal ibox-content">
	    	<input type="hidden" id="roleId" value="#(role.id??)">
           <div class="form-group">
               <span class="col-sm-2 control-label">角色名称</span>
               <div class="col-sm-4">
                   <input type="text" class="form-control" id="roleName" value="#(role.name??)"/>
               </div>
           </div>
           <div class="form-group">
               <span class="col-sm-2 control-label">描述</span>
               <div class="col-sm-4">
                   <textarea rows="3" cols="6" class="form-control" id="roleDesc">#(role.description??)</textarea>
               </div>
           </div>
           #if(role?? && role.isSystem==false)
           <div class="form-group">
               <span class="col-sm-2 control-label">状态</span>
               <div class="col-sm-4">
                   <select id="active_sel" class="form-control" style="width: 120px;">
	                	<option value="0" #if(role && role.active ==false) selected="selected" #end>删除</option>
	                	<option value="1" #if(role== null || role.active ==true) selected="selected" #end>启用</option>
	                </select>
               </div>
           </div>
           #end
           <div class="form-group">
               <span class="col-sm-2 control-label">角色权限</span>
               <div class="col-sm-6">
                   <div id="dependencyTreeViewer"></div>
               </div>
           </div>
       </form>
       <div class="col-md-6" align="right">
           <button class="btn btn-primary btn-sm" id="saveRoleBtn">保存</button>
           <a href="#(webctx)/role" class="btn btn-white btn-sm" type="reset">取消</a>
       </div>
	</div>
</div>
#end
<script type="text/javascript">
$(document).ready(function() {
	var roleId = "#(role.id??)";
	$('#dependencyTreeViewer').jstree({
        'core': {
            'data' : {
				'url' : '#(webctx)/menu/list',
				'data' : function (node) {
					return { 'id' : node.id == "#" ? null : node.id, roleId : roleId};
				}
			}
        }
		,'plugins' : ['dnd', 'types', "checkbox"]
    }).on('activate_node.jstree', function (e, data) {
	}).on('hover_node.jstree', function (e, data) {
        //监听鼠标移上事件
        var node=data.node;
        var a_attr=node.a_attr;
        var id=node.id;
    });
	
	function getMenuIds(){   
	 	//取得所有选中的节点，返回节点对象的集合
	    var nodes=$("#dependencyTreeViewer").jstree(true).get_selected(false); //使用get_checked方法 
	    return nodes.toString();
	}
	
	$("#saveRoleBtn").click(function(){
		var menuids = getMenuIds();
		var roleName = $("#roleName").val();
		var roleDesc = $("#roleDesc").val();
		if(roleName == null || roleName == ""){
			obz.warn("请填写角色名称");
			return;
		}
		if(roleDesc == null || roleDesc == ""){
			obz.warn("请填写角色描述");
			return;
		}
		if(menuids == null || menuids == ""){
			obz.warn("请选择角色权限");
			return;
		}
		var params = {};
		params.id = $("#roleId").val();
		params.roleName = roleName;
		params.roleDesc = roleDesc;
		params.menuids = menuids;
		params.active = $("#active_sel").val();
		obz.ajaxJson(obz.ctx + "/role/save", params, function(resp){
			if(resp.code == 200){
				obz.msg("操作成功", function(){
					location.href = "#(webctx)/role";
				});
			}
		});
		
	});
	
});
</script>